<template>
  <div class="gran-div">
    <div class="gran-flex">
      <el-button
        v-for="item in grantList"
        :key="item.value"
        :type="activeType === item.value ? 'primary' : ''"
        @click.stop="hangButSelect(item.value)"
      >
        {{ item.lable }}
      </el-button>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";

const props = defineProps({
  grantList: {
    type: Array,
    default: [
      {
        lable: "全部",
        value: "1",
      },
      {
        lable: "房屋认证",
        value: "2",
      },
      {
        lable: "设计签约",
        value: "3",
      },
      {
        lable: "乔迁之喜",
        value: "4",
      },
    ],
  },
});
const activeType = ref("");

const hangButSelect = (type) => {
  activeType.value = type;
};

const initDataValue = () => {
  activeType.value = "";
};

defineExpose({
  initDataValue,
});
</script>
<style scoped>
.gran-div {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gran-flex {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
</style>
